<template>
  <div class="login-view">
    <br>
    <br>
    <h1 style="text-align: center">Linux 监控与告警平台</h1>
    <el-card>
      <template slot="header">
        {{ register ? '用户注册' : '用户登录' }}
      </template>
      <el-form ref="record" size="medium" :model="record" :rules="rules">
        <el-row :gutter="20">
          <el-col>
            <el-form-item prop="name" label="用户名">
              <el-input v-model="record.name"></el-input>
            </el-form-item>
          </el-col>
          <div v-if="register">
            <el-col>
              <el-form-item prop="email" label="邮箱">
                <el-input v-model="record.email"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-col>
            <el-form-item prop="password" label="密码">
              <el-input v-model="record.password" type="password"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item v-if="register" prop="rePassword" label="确认密码">
              <el-input v-model="record.rePassword" type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="oper-area">
          <el-checkbox v-if="!register" v-model="record.remember" style="float: left;margin-top: 6px">7天免登陆</el-checkbox>
          <el-button type="text" @click="register = !register">
            {{ register ? '前去登陆' : '前去注册' }}
          </el-button>
          <el-button :loading="$store.state.loading" type="primary" @click="login">
            {{ register ? '注册' : '登录' }}
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>


<script>
import { SHA256 } from 'crypto-js'
import { mapActions } from 'vuex'

export default {
  name: 'login-view',
  data() {
    const validatePassword = (rule, value, cb) => {
      if (!this.record.password) {
        return cb(new Error('请先输入密码'))
      }
      if (this.record.password !== value) {
        return cb(new Error('前后密码不一致'))
      }
      cb()
    }
    return {
      register: false,
      record: {
        name: '',
        password: '',
        rePassword: '',
        remember: false,
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名' }
        ],
        email: [
          { required: true, message: '请输入邮箱' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' },
        ],
        phone: [
          { required: true, message: '请输入电话号码' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ],
        rePassword: [
          { required: true, message: '请输入确认密码' },
          { validator: validatePassword, trigger: 'change' },
        ],
      },
    }
  },
  methods: {
    ...mapActions(['LOGIN']),
    login() {
      this.$refs.record.validate((valid) => {
        if (!valid) return
        const record = { ...this.record }
        // 加密
        record.password = SHA256(record.password).toString()
        if (!this.register) {
          this.$httpPost('/login', record).then((response) => {
            this.LOGIN(response.data)
            this.$message.success('登陆成功！')
            this.$router.push({ path: this.$route.query.redirect || '/' })
          }).catch(this.$message.error)
        } else {
          this.$httpPost('/register', record).then(() => {
            this.$message.success('注册成功！')
            this.register = false
          }).catch(this.$message.error)
        }
      })
    },
  },
  created() {},
}
</script>


<style lang="scss">
.login-view {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #f8f8f8, #c9c9c9);
  .el-card {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
  }
}
</style>
